<template>
    <div class="content">

        <!--头部-->
        <div class="header-setting">
            <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item>
                    <a href="../mian">首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>设备管理</a-breadcrumb-item>
                <a-breadcrumb-item>软件版本管理</a-breadcrumb-item>
            </a-breadcrumb>
            <!--查询条件-->
            <div class="box-condition-body">
                <div class="box-condition-item">
                    <div style="margin: 0 50px">版本号</div>
                    <template>
                        <a-input style="margin: 0 100px 0 0px;width: 200px" @ v-model="queryVersionStr"
                                 @pressEnter="queryData" placeholder="如：0.0.0"/>
                    </template>
                    <div style="margin: 0 50px">上传日期</div>
                    <template>
                        <div>
                            <a-date-picker @change="onChange" v-model="queryUploadDateStr"/>
                        </div>
                    </template>
                    <a-button style="margin: 0 0 0 20px" @click="queryData">查询</a-button>
                    <a-button style="margin: 0 0 0 20px" @click="resetCondition">重置</a-button>
                </div>
            </div>
        </div>


        <div class="box-form">
            <!--工具栏-->
            <div class="box-tool">
                <div></div>
                <div style="display: flex">
                    <a-button @click="addClick" icon="plus">上传版本</a-button>
                    <a-button @click="editClick" icon="edit">编辑</a-button>
                    <a-popconfirm title="确认删除？" okText="确认" cancelText="取消"
                                  @confirm="deleteClick">
                        <a-button icon="delete">删除</a-button>
                    </a-popconfirm>
                </div>
            </div>

            <!--数据表格-->
            <div class="box-table">
                <a-table :columns="columns"
                         :dataSource="dataSource"
                         :pagination="pagination"
                         bordered size="small"
                         :scroll="scroll"
                         :customRow="customRow"
                         :rowClassName="setRowClassName"
                         @change="tableChange"
                >
                    <template slot="downloadUrlSlot" slot-scope="text">
                        <!-- <div>{{qiniuUrl+'/'+text}}</div> -->
                        <div>{{text}}</div>
                    </template>
                    <template slot="onlineUpgradeSwitch" slot-scope="text, record">
                        <a-switch checkedChildren="开" unCheckedChildren="关" :checked="switchChecked(text,record)"
                                  @change="onlineUpgradeSwitchChanged($event,record)"/>
                    </template>
                </a-table>
            </div>
        </div>


    </div>


</template>

<script>
    import AddPagesUtils from "../../utils/AddPagesUtils";
    import Constant from "../../utils/Constant";
    import UpdateServiceApi from '../../api/equipment/UpdateService';
    import MediaManagerApi from '../../utils/MediaManager';

    const columns = [
        {
            title: "版本号"
            , dataIndex: "version"
            , width: '9%'
        }, {
            title: "更新内容"
            , dataIndex: "updateContent"
            , width: '20%'
        },
        {
            title: "下载地址"
            , dataIndex: "downloadUri"
            , scopedSlots: {customRender: 'downloadUrlSlot'}
            , width: '27%'
        },
        {
            title: "上传者"
            , dataIndex: "nickName"
            , width: '7%'
        },
        {
            title: "禁止更新时间段"
            , dataIndex: "forbidUpdateTimeStr"
            , width: '10%'
        },
        {
            title: "上传时间"
            , dataIndex: "createdTime"
            , width: '16%'
        },
        {
            title: "在线升级"
            , scopedSlots: {customRender: 'onlineUpgradeSwitch'}
            , dataIndex: "onlineUpgradeSwitch"
        },
    ];
    const dataSource = [];

    const queryCondition = {
        limit: "20",
        curr: "1",
        version: "",
        uploadTime: "",
        softwareType: "0"
    };

    const deleteCondition = {
        targetId: "",
    };
    const editCondition = {
        id: "",
        version: "",
        downloadUri: "",
        deviceTypeId: "",
        updateContent: "",
        forbidUpdateStart: "",
        forbidUpdateEnd: "",
        softwareType: "0",
        onlineUpgradeSwitch: 0,
    };


    export default {
        name: "UpdateService",
        /*数据层*/
        data() {
            return {
                columns: columns,
                dataSource: dataSource,
                /*分页插件*/
                pagination: {
                    showTotal: total => `共${total}条`,
                    total: 0,
                    defaultCurrent: 1,
                    showQuickJumper: true,
                    defaultPageSize: 20
                },
                /*表格固定头部*/
                scroll: {
                    y: 550,
                },
                tableState: {
                    rowId: -1,
                },
                /*当前选中的行数据*/
                currRowData: "",
                queryVersionStr: "",
                queryUploadDateStr: null,
                queryCondition,
                deleteCondition,
                editCondition,
                qiniuUrl: Constant.QiNiuURL,
                test: "233"

            }
        },
        /*方法层*/
        methods: {
            onChange() {
                this.queryData();
            },
            onlineUpgradeSwitchChanged(checked, record) {
                record.onlineUpgradeSwitch = checked;
                let condition = this.editCondition;
                condition.id = record.id;
                condition.onlineUpgradeSwitch = checked ? 1 : 0;
                this.updateOperate(condition);

            },
            addClick() {
                AddPagesUtils.showAddPages(Constant.viewType.UPLOAD_VERSION_FILE, null, this.confirmAddAndUpdate);
            },
            //上传文件回调
            confirmAddAndUpdate(data) {
                //信号：1新增，2更新
                let sign = data.sign;
                if (sign == '1') {
                    let uploadFileObject = data.uploadFileObject;
                    if (uploadFileObject) {
                        uploadFileObject.prefix += "/";
                    }
                    UpdateServiceApi.addVersion(data).then(() => {

                        this.queryData();

                        //上传文件
                        if (uploadFileObject) {
                            MediaManagerApi.uploadBatchFile(
                                uploadFileObject
                            ).then(() => {
                                this.$message.success("添加成功！");
                                // this.$message.success("上传成功！");
                            }).catch(err => {
                                console.log("上传异常", err);
                            });
                        }


                    }).catch(err => {
                        console.log("添加设备版本信息异常！", err);
                    });
                } else if (sign == '2') {
                    this.updateOperate(data);
                } else {
                    console.warn("回调失败，非法信号：", sign);
                }
            },
            editClick() {
                let data = this.currRowData;
                if (data == undefined || data == '') {
                    return this.$message.warn("请选择编辑的数据！");
                }
                AddPagesUtils.showAddPages(Constant.viewType.UPLOAD_VERSION_FILE, data, this.confirmAddAndUpdate);
            },
            deleteClick() {
                let dataId = this.currRowData.id;
                if (dataId == undefined || dataId == '') {
                    return this.$message.warn("请选择删除的数据！");
                }
                let condition = this.deleteCondition;
                condition.targetId = dataId;
                UpdateServiceApi.delVersion(condition).then(() => {
                    this.$message.success("删除成功！");
                    this.currRowData = "";
                    this.queryData();
                }).catch(err => {
                    console.log("删除版本信息异常！", err);
                });

            },
            updateOperate(condition) {
                let uploadFileObject = condition.uploadFileObject;
                if (uploadFileObject) {
                    uploadFileObject.prefix += "/";
                }
                UpdateServiceApi.editVersion(condition).then(() => {
                    this.queryData();
                    this.currRowData = "";
                    //上传文件
                    if (uploadFileObject) {
                        MediaManagerApi.uploadBatchFile(
                            uploadFileObject
                        ).then(() => {
                            this.$message.success("上传成功！");
                        }).catch(err => {
                            console.log("上传异常", err);
                        });
                    }

                }).catch(err => {
                    console.log("更新版本信息异常！", err);
                });
            },
            tableChange(page) {
                this.queryCondition.curr = page.current;
                this.queryData();
            },
            resetCondition() {
                this.clearCondition();
                this.queryData();
            },
            clearCondition() {
                this.queryVersionStr = "";
                this.queryUploadDateStr = null;
            },
            queryData() {
                let condition = this.queryCondition;
                condition.version = this.queryVersionStr == null ? null : this.queryVersionStr;
                condition.uploadTime = this.queryUploadDateStr == null ? null : this.queryUploadDateStr.format("YYYY-MM-DD");
                UpdateServiceApi.getVersionManageList(condition).then((data) => {
                    this.dataSource = data.data.list;
                    this.pagination.total = data.data.total;
                }).catch(err => {
                    console.log("获取设备版本信息异常！", err);
                });
            },
            customRow(record) {
                return {
                    on: { // 事件
                        click: () => {
                            this.currRowData = record;
                            this.tableState.rowId = record.id;
                        },       // 点击行
                    },
                }
            },
            setRowClassName(record) {
                return record.id === this.tableState.rowId ? 'clickRowStyl' : '';
            },

        },
        /*计算层*/
        computed: {
            switchChecked() {
                return function (value) {
                    return value == '1';
                }

            },


        },
        /*渲染层*/
        mounted() {
            this.queryData();
        },
    }
</script>

<style scoped>
    .content {
        width: 100%;
        height: 100%;
    }

    .header-setting {
        width: 100%;
        height: 174px;
        background: #fff;
    }

    .header-setting .breadcrumb {
        margin-left: 41px;
        padding-top: 15px;
    }

    /*表格行选中背景颜色*/
    .clickRowStyl {
        background-color: #C1E0FD;
    }

    .box-condition-item {
        display: flex;
        align-items: center;
        min-width: 1500px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 5px 0;
    }

    /* 表单 */
    .box-form {
        padding-left: 40px;
        padding-right: 40px;
        min-height: 705px;
        background: #fff;
        margin-top: 8px;
    }

    .box-form .box-tool {
        padding-top: 11px;
        margin: 8px 0;
        width: 100%;
        /* flex */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .box-tool button {
        margin-right: 10px;
    }

    .ant-switch-checked {
        background-color: #1890ff;
    }


</style>
